Vue CLI 项目天生支持 PostCSS、CSS Modules 和包
含 Sass、Less、Stylus 在内的预处理器。


引用静态资源
所有编译后的 CSS 都会通过 css-loader 来解析其中的 url() 引用，
并将这些引用作为模块请求来处理。这意味着你可以根据本地的文件
结构用相对路径来引用静态资源。另外要注意的是如果你想要引用一
个 npm 依赖中的文件，或是想要用 webpack alias，则需要在路径
前加上 ~ 的前缀来避免歧义。更多细节请参考处理静态资源


预处理器
你可以在创建项目的时候选择预处理器 (Sass/Less/Stylus)。如果当时
没有选好，内置的 webpack 仍然会被预配置为可以完成所有的处理。
你也可以手动安装相应的 webpack loader：
# Sass
npm install -D sass-loader sass

# Less
npm install -D less-loader less

# Stylus
npm install -D stylus-loader stylus
然后你就可以导入相应的文件类型，或在 *.vue 文件中这样来使用：
<style lang="scss">
$color: red;
</style>


PostCSS
是一个用 JavaScript 工具和插件转换 CSS 代码的工具
Vue CLI 内部使用了 PostCSS。
你可以通过 .postcssrc 或任何 postcss-load-config 支持
的配置源来配置 PostCSS。也可以通过 vue.config.js 中
的 css.loaderOptions.postcss 配置 postcss-loader。
我们默认开启了 autoprefixer。如果要配置目标浏览器，
可使用 package.json 的 browserslist 字段。
关于 CSS 中浏览器前缀规则的注意事项
在生产环境构建中，Vue CLI 会优化 CSS 并基于目标浏览器抛
弃不必要的浏览器前缀规则。因为默认开启了 autoprefixer，
你只使用无前缀的 CSS 规则即可。


向预处理器 Loader 传递选项
有的时候你想要向 webpack 的预处理器 loader 传递选项。
你可以使用 vue.config.js 中的 css.loaderOptions 选项。
比如你可以这样向所有 Sass/Less 样式传入共享的全局变量：
module.exports = {
  css: {
    loaderOptions: {
      // 给 sass-loader 传递选项
      sass: {
        // @/ 是 src/ 的别名
        // 所以这里假设你有 `src/variables.sass` 这个文件
        // 注意：在 sass-loader v8 中，这个选项名是 "prependData"
        additionalData: `@import "~@/variables.sass"`
      },
      // 默认情况下 `sass` 选项会同时对 `sass` 和 `scss` 语法同时生效
      // 因为 `scss` 语法在内部也是由 sass-loader 处理的
      // 但是在配置 `prependData` 选项的时候
      // `scss` 语法会要求语句结尾必须有分号，`sass` 则要求必须没有分号
      // 在这种情况下，我们可以使用 `scss` 选项，对 `scss` 语法进行单独配置
      scss: {
        additionalData: `@import "~@/variables.scss";`
      },
      // 给 less-loader 传递 Less.js 相关选项
      less:{
        // http://lesscss.org/usage/#less-options-strict-units `Global Variables`
        // `primary` is global variables fields name
        globalVars: {
          primary: '#fff'
        }
      }
    }
  }
}
提示
这样做比使用 chainWebpack 手动指定 loader 更推荐，
因为这些选项需要应用在使用了相应 loader 的多个地方。
















